<template>
	<Top-Page>
		<cu-custom bgColor="bg-gradual-white" :isBack="true">
			<template #backText></template>
			<template #content>账号安全</template>
		</cu-custom>

		<Cell class="cell-2" label="我的账号" rightIcon @click.stop="editAcc">
			<view>{{ userInfo.account }}</view>
		</Cell>

		<Cell label="是否被搜索" :class="{ 'novice-guide-operate': !noviceGuide.includes(19) }">
			<switch
				class="switch"
				@change="setBeSearch"
				:class="userInfo.be_search ? 'checked' : ''"
				:checked="userInfo.be_search"
			></switch>
		</Cell>

		<Cell
			class="cell-2"
			label="修改密码"
			rightIcon
			@click.stop=";(modelName = 'show'), (editPass = true), (title = '修改密码')"
		/>

		<Cell
			label="修改收藏密码"
			rightIcon
			@click.stop=";(modelName = 'show'), (collectPass = true), (title = '修改收藏密码1')"
		/>

		<Cell
			label="修改收藏密码"
			rightIcon
			@click.stop=";(modelName = 'show'), (collectPass = true), (title = '修改收藏密码2')"
		/>

		<view class="cu-list menu mt-10">
			<view
				class="cu-item"
				v-if="!userInfo.is_auth"
				@tap=";(modelName = 'show'), (approve = true), (title = '认证账户')"
			>
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-vip text-orange ml-5"></text>
						<text class="ml-10">认证账户</text>
					</view>
					<view class="text-gray-b3 text-sm">
						<text class="cuIcon-infofill ml-5 mr-10"></text>
						验证账户的真实性，绑定后请使用新账户来登录！
					</view>
				</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>

			<Cell label="注销账号" rightIcon @click.stop="zxShow = !zxShow" />
		</view>

		<view class="cu-modal bottom-modal" :class="modelName == 'show' ? 'show' : ''" @tap="modelName = ''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar cu-bar-wrap">
					<view class="action text-gray" @tap="cancel()"><text class="cuIcon-back"></text></view>
					<!-- <view class="cu-bar-title">{{ title }}</view> -->
					<view class="text-green cu-bar-bc" @tap="save">保存</view>
				</view>

				<view class="cu-bar-title">{{ title }}</view>
				<view class="manage-content mb-20">
					<view class="menu mt-15">
						<!--  -->
						<view class="cu-form-group text-left" style="padding: 0 70rpx" v-if="userInfo.is_auth">
							<view class="title">验证码</view>
							<input placeholder="输入验证码" name="input" v-model="code" />
							<button
								class="cu-btn bg-blue cu-load"
								:class="loading ? 'loading' : ''"
								:disabled="loading"
								@tap="sendCode(true)"
							>
								{{ codeText }}{{ codeTimes ? `(${codeTimes})` : "" }}
							</button>
						</view>
						<template v-if="collectPass">
							<view class="text-gray-b3 p-30 text-center">
								<text class="cuIcon-infofill ml-5 mr-10"></text>
								修改收藏的验证密码！
							</view>
							<view class="from">
								<view class="cu-form-group text-left">
									<view class="title cu-form-group__label">新密码</view>
									<input placeholder="输入新的密码" name="input" v-model="collectPWD" />
								</view>
								<view class="cu-form-group text-left">
									<view class="title cu-form-group__label">重复新密码</view>
									<input placeholder="重复输入新密码" name="input" v-model="collectRepass" />
								</view>
							</view>
						</template>
						<template v-if="approve">
							<view class="text-gray-b3 text-center">
								<!-- <text class="cuIcon-infofill ml-5 mr-10"></text> -->
								验证账户的真实性，绑定后请使用新账户来登录！
							</view>
							<view class="from">
								<view class="cu-form-group text-left">
									<view class="title cu-form-group__label-1">新账号</view>
									<input class="inp" placeholder="输入新的邮箱或者手机号" name="input" v-model="account" />
								</view>
								<view class="cu-form-group text-left">
									<view class="title cu-form-group__label-1">新账号验证码</view>
									<input class="inp" placeholder="输入验证码" name="input" v-model="newCode" />
									<button
										class="cu-btn bg-blue cu-load"
										:class="loading ? 'loading' : ''"
										:disabled="loading"
										@tap="sendCode(false)"
									>
										{{ codeText }}{{ codeTimes ? `(${codeTimes})` : "" }}
									</button>
								</view>
							</view>
						</template>
						<template v-if="editPass">
							<view class="text-gray-b3 text-center">
								<!-- <text class="cuIcon-infofill ml-5 mr-10"></text> -->
								验证账户的真实性，绑定后请重新登录！
							</view>
							<view class="from">
								<Field
									v-if="!userInfo.is_auth"
									label="原密码"
									placeholder="输入原来的密码"
									v-model="originalPassword"
								/>

								<Field class="field-2" label="新密码" placeholder="输入新的密码" v-model="password" />

								<Field label="重复新密码" placeholder="重复输入新密码" v-model="repass" />

								<!-- <view class="cu-form-group text-left" v-if="!userInfo.is_auth">
                  <view class="title cu-form-group__label">原密码</view>
                  <input placeholder="输入原来的密码" name="input" v-model="originalPassword" />
                </view> -->
								<!-- <view class="cu-form-group text-left">
                  <view class="title cu-form-group__label">新密码</view>
                  <input placeholder="输入新的密码" name="input" v-model="password" />
                </view> -->
								<!-- <view class="cu-form-group text-left">
                  <view class="title cu-form-group__label">重复新密码</view>
                  <input placeholder="重复输入新密码" name="input" v-model="repass" />
                </view> -->
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="novice-guide-box" v-if="!noviceGuide.includes(19)">
			<view class="novice-guide-location-box">最后，请打开“是否被搜索”选项</view>
		</view>

		<Popup round v-model:show="zxShow" class="popup-dialog">
			<view class="zx-title">注销账号</view>

			<view class="zx-content">请确认是否注销账号？</view>

			<view class="zx-btns">
				<view class="zx-btn cancel" @click="zxShow = !zxShow">取消</view>
				<view class="zx-btn confirm" @click="zxConfirm">确定</view>
			</view>
		</Popup>
	</Top-Page>
</template>

<script>
import Cell from "@/components/Cell/Cell.vue"
import Field from "@/components/Field/Field.vue"
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
const loginStore = useloginStore(pinia)
import { debounce } from "@/utils/utils.js"
import useAudioStep from "@/hooks/useAudioStep"
import { saveInfo } from "@/hooks/useSaveChanges.js"
const { playAudio } = useAudioStep()
export default {
	data() {
		return {
			noviceGuide: uni.getStorageSync("noviceGuide") || [],
			userInfo: loginStore.userInfo,
			globalConfig: loginStore.globalConfig,
			codeText: "发送验证码",
			codeTimes: 0,
			codeTimer: null,
			modelName: "",
			code: "",
			title: "",
			account: "",
			newCode: "",
			password: "",
			originalPassword: "",
			collectPassword: "",
			collectPWD: "",
			collectRepass: "",
			repass: "",
			loading: false,
			editPass: false,
			approve: false,
			collectPass: false,
			setBeSearchStatus: false,
			zxShow: false,
			saveInfo,
		}
	},
	components: { Cell, Field },
	onShow() {
		if (!this.noviceGuide.includes(19)) {
			playAudio(19)
		}
	},
	onUnload() {
		clearInterval(this.codeTimer)
	},
	methods: {
		logoff() {
			// uni.showModal({
			//   title: '注销账号',
			//   content: '请确认是否注销账号？',
			//   success: (res) => {
			//     if (res.confirm) {
			//       this.$api.msgApi.logoff().then((res) => {
			//         uni.showToast({
			//           title: `${res.msg}`,
			//           icon: 'none'
			//         });
			//       });
			//     } else if (res.cancel) {
			//       console.log('用户点击取消');
			//     }
			//   }
			// });
		},

		zxConfirm() {
			this.$api.msgApi.logoff().then((res) => {
				this.zxShow = !this.zxShow
				uni.showToast({
					title: `${res.msg}`,
					icon: "none",
				})
			})
		},
		cancel() {
			this.modelName = ""
			this.editPass = false
			this.collectPass = false
			this.approve = false
		},
		//是否可以被搜索
		setBeSearch(e) {
			this.setBeSearchStatus = !this.setBeSearchStatus
			const value = e.detail.value
			this.userInfo.be_search = value ? 1 : 0

			if (!this.noviceGuide.includes(19)) {
				this.noviceGuide.push(19)
				uni.setStorageSync("noviceGuide", this.noviceGuide)
			}
			this.saveInfo({
				be_search: this.userInfo.be_search,
			})
			this.changeBesearch(this.userInfo.be_search)
		},
		changeBesearch: debounce(function () {
			this.$api.msgApi
				.besearch({
					type: this.userInfo.be_search,
				})
				.then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none",
					})
				})
		}),
		logout() {
			let client_id = uni.getStorageSync("client_id")
			this.$api.LoginApi.logout({
				client_id: client_id,
			}).then((res) => {
				if (res.code == 0) {
					loginStore.logout()
				}
			})
		},
		editAcc() {
			if (!this.userInfo.is_auth) {
				uni.showToast({
					title: "请先认证账户！",
					icon: "none",
				})
				return false
			}
			this.modelName = "show"
			this.editPass = false
			this.title = "我的账号"
		},
		openWeb(e) {
			let srcs = "https://im.raingad.com"
			uni.navigateTo({
				url: "/pages/mine/webview?src=" + srcs,
			})
		},
		save() {
			if (this.code == "" && this.userInfo.is_auth) {
				uni.showToast({
					title: "请输入验证码",
					icon: "none",
				})
				return false
			}
			if (this.editPass) {
				if (this.password == "" || this.password.length < 6 || this.password.length > 16) {
					uni.showToast({
						title: "请输入6-16个字符串的密码",
						icon: "none",
					})
					return false
				}
				if (this.password != this.repass) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none",
					})
					return false
				}
				let params = {
					password: this.password,
					code: this.code,
					originalPassword: this.originalPassword,
				}
				this.$api.msgApi.editPassword(params).then((res) => {
					if (res.code == 0) {
						this.cancel()
						uni.showToast({
							title: res.msg,
							icon: "none",
						})
					}
				})
			}
			console.log(1)
			//设置收藏密码
			if (this.collectPass) {
				console.log(2)
				if (this.collectPWD == "" || this.collectPWD.length < 4 || this.collectPWD.length > 20) {
					uni.showToast({
						title: "请输入4-20个字符串的密码",
						icon: "none",
					})
					return false
				}
				if (this.collectPWD != this.collectRepass) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none",
					})
					return false
				}

				let channel = 0
				if (this.title === "修改收藏密码2") {
					channel = 1
				}
				console.log(3)

				this.$api.msgApi
					.collectpwd({
						pwd: this.collectPWD,
						channel,
					})
					.then((res) => {
						if (res.code == 0) {
							this.cancel()
							uni.showToast({
								title: res.msg,
								icon: "none",
							})

							this.collectPWD = ""
							this.collectRepass = ""
							this.code = ""
						}
					})
			}

			if (this.approve) {
				if (this.account == "") {
					uni.showToast({
						title: "请输入新的账号",
						icon: "none",
					})
					return false
				}
				if (this.newCode == "") {
					uni.showToast({
						title: "请输入新账号的验证码",
						icon: "none",
					})
					return false
				}
				let params = {
					account: this.account,
					code: this.code,
					newCode: this.newCode,
				}
				this.$api.msgApi.editAccount(params).then((res) => {
					if (res.code == 0) {
						this.cancel()
						uni.showToast({
							title: "修改成功，请重新登陆",
							icon: "none",
						})
					}
				})
			}
		},
		sendCode(e) {
			if (this.codeTimes) {
				uni.showToast({
					title: "请勿重复发送验证码",
					icon: "none",
				})
				return
			}

			clearInterval(this.codeTimer)
			let account = e ? this.userInfo.account : this.account
			let type = this.editPass ? 3 : 4
			if (account == "") {
				uni.showToast({
					title: "请输入新的账号",
					icon: "none",
				})
				return false
			}
			this.loading = true
			this.$api.LoginApi.sendCode({
				account: account,
				type: type,
			}).then((res) => {
				this.loading = false
				if (res.code != 0) return

				this.codeText = "再次发送"
				this.codeTimes = 60

				this.codeTimer = setInterval(() => {
					this.codeTimes--
					console.log(this.codeTimes)
					if (this.codeTimes <= 0) clearInterval(this.codeTimer)
				}, 1000)

				uni.showToast({
					title: res.msg,
					icon: "none",
				})
			})
		},
	},
}
</script>

<style scoped lang="scss">
.cu-load {
	display: block;
	line-height: 68rpx;
	text-align: center;
}

.cu-item::after {
	left: 16rpx;
	right: 16rpx;
}

:deep .cu-dialog {
	height: 100vh;
	background-color: #fff;

	.cu-form-group {
		background-color: transparent;
		// padding: 0 70rpx;
	}

	.bg-blue {
		line-height: 2.3em;
		color: #fff;
		background-color: #1677ff;
	}
}

.p-30 {
	padding: 30rpx;
}

.cu-bar {
	flex-wrap: wrap;
}

.cu-bar-wrap {
	padding: 0 20rpx;
}

.cu-bar-title {
	color: #232323;
	text-align: center;
	flex-shrink: 0;
	font-weight: bold;
	font-size: calc(var(--amplified_base) * 40rpx);
	color: #1a1a1a;
	line-height: calc(var(--amplified_base) * 38rpx);
}

.cu-bar-bc {
	width: calc(var(--amplified_base) * 104rpx);
	height: calc(var(--amplified_base) * 56rpx);
	line-height: calc(var(--amplified_base) * 56rpx);
	background: #41d429;
	font-weight: 400;
	font-size: calc(var(--amplified_base) * 28rpx);
	color: #ffffff;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.cu-form-group__label {
	font-weight: 500;
	font-size: calc(var(--amplified_base) * 32rpx);
	color: #000000;
	width: 6em;
	margin-right: 10rpx;
	flex-shrink: 0;
}

.cu-form-group__label-1 {
	width: 7em;
}

.from {
	margin-top: 80rpx;
	padding: 0 40rpx;
	text-align: left;

	:deep(.field-box) {
		padding: 26rpx 30rpx;
	}
}

.inp {
	font-size: calc(var(--amplified_base) * 20upx);
	display: inline-block;
	// flex-shrink: 0;
	flex: 1;
}

.uni-input-placeholder {
	color: #cccccc;
}

.text-gray-b3 {
	color: #b3b3b3;
	font-weight: 400;
	font-size: calc(var(--amplified_base) * 24rpx);
	letter-spacing: 1rpx;
}

.cu-dialog .text-gray {
	margin-left: 0;
	min-width: 60rpx !important;
}

.novice-guide-location-box {
	bottom: auto;
	top: 50rpx;
	text-align: center;
	font-size: 48rpx;
}

:deep .cu-modal {
	z-index: 151;
}

:deep(.popup-dialog) {
	width: 600rpx;
	text-align: center;

	.zx-title {
		padding: 40rpx;
		font-size: 38rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.zx-content {
		width: 80%;
		margin-left: 10%;
		padding: 20rpx;
	}

	.zx-btns {
		margin-top: 40rpx;
		display: flex;
		border-top: 1rpx solid #f4f4f4;

		.zx-btn {
			line-height: 1;
			padding: 30rpx;
			width: 50%;
			cursor: pointer;
		}

		.cancel {
			border-right: 1rpx solid #f4f4f4;
		}

		.confirm {
			color: var(--subject_color);
		}
	}
}
</style>
